﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>答题界面from(1135px)to(1275px)</title>
    <style>
            body{overflow:scroll;background-color: rgb(0, 0, 0);
            }

                .bj{filter:alpha(opacity=30);
                -moz-opacity:1;
                opacity: 0.9;
                
                height:620px;
                position:relative;
                top:20px;
                background: rgb(130, 160, 160);
                    background-size:100%;
                    

              }

                .bjd{display: inline-block;width:140px;height:420px;border:solid #000;position:absolute;top:20px;left:1225px;box-shadow:2px 2px 3px 3px rgba(20,50,60,0.9);}
                .bjt{word-wrap:break-word; display: none;color:rgba(0 ,0 ,0,0.9);width:140px;height:420px;border:solid #000;background:rgba(0 ,0 ,0,0.3);position:absolute;top:0;}

            .bjd:hover .bjt{  display: block;}

            p{position:relative;
                text-align:center;
                font-size:1cm;
                top:20px;
                color: rgb(0,0,0);

            }

            a{color:#eeeeff;font-size:25px;}
            a:link{color:#eeeeff;text-decoration:none;}	/* 未访问的链接 */
            a:visited {color: #eeeeee;text-decoration:none;}
            a:hover {color: rgba(200 ,76 ,108,0.9);text-decoration:none;}	/* 鼠标移动到链接上 */
            a:active {color:rgb(160,130,120);text-decoration:none;}	/* 选定的链接 */

            label{color: rgba(0 ,0 ,0,1);font-size:2em;position:relative;top:50px;}

    </style>
</head>
<body>
<div style="color:#000000"><h1 style="position:relative;top:10px;left:25px;color:#ffffff;">答题界面</h1></div>

<div class="bj">
    
</div>





<button id="xyt" style="color:rgb(160,130,120);position:absolute;left:1300px;top:660px">下一题</button>






<script type="text/javascript" src="https://www.3cp.cn/js/common/jquery-1.12.0-min.js"></script>

<script>    
    
    window.question;
    window.curlndex=0;

    
	function next() {
		var str = "";//拼接此题html
		var n = window.question[window.curlndex++];//获取当前题目

		var arr = [];
		for (var j = 0; j < n.opt.length; j++) {
			arr[j] = JSON.stringify(n.opt[j]);
		}
		str += "<div class=\"bjd\"><h3>点击此处查看答案及解析</h3><div class=\"bjt\"><br><br><h2><span value=\"A\">"
				+ n.answer
				+ "</span></h2><br><br>依题意可得正确答案...</div></div><p>"
				+ n.question
				+ "</p><form action=\"\" method=\"post\" style=\"text-align:center;margin:30px;\"><label><input type=\"radio\" name=\"op\" value=\"A\"/>"
				+ arr[0]
				+ "</label><br><br><br><label><input type=\"radio\" name=\"op\" value=\"B\"/>"
				+ arr[1]
				+ "</label><br><br><br><label><input type=\"radio\" name=\"op\" value=\"C\"/>"
				+ arr[2]
				+ "</label><br><br><br><label><input type=\"radio\" name=\"op\" value=\"D\"/>"
				+ arr[3] + "</label></form>"
		$(".bj").html(str);

		$("span").attr("id", n.answer);

		$("input:radio").click(function() {
			var user_val = $(this).attr("value");
			$('label').find('span').empty();
			$(this).parent().append(user_val == n.answer?"<span style=\"color:green;\">&nbsp&nbsp回答正确</span>":"<span style=\"color:red;\">&nbsp&nbsp回答错误</span>");
			$.ajax({ //请求方式                        
				type : "GET", //文件位置            
				url : "/api?fid=go&id=" + n.id + "&answer=" + user_val,
				dataType : "json", //请求成功后要执行的函数，拼接html           
				success : function(data) {
					
				}
			});
		})

	}

	$(document).ready(function() {
		$.ajax({ //请求方式                        
			type : "GET", //文件位置            
			url : "/api?fid=question&kid=" + s,
			dataType : "json", //请求成功后要执行的函数，拼接html           
			success : function(data) {
				window.question = data.data;
				next();
			}

		});

		$("#xyt").click(next);
	});

	var st = window.location.href.split("=");
	alert(st[1]);
	s = st[1];
</script>


</body>
</html>